<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
  <script src="./my_jquery2.js"></script>
<!--  <style>-->
<!--    div.panel, p.flip {-->
<!--      margin: 0px;-->
<!--      padding: 5px;-->
<!--      text-align: center;-->
<!--      background: #e5eecc;-->
<!--      border: solid 1px #c3c3c3;-->
<!--    }-->
<!--    div.panel {-->
<!--      height: 120px;-->
<!--      display: none;-->
<!--    }-->
<!--  </style>-->
</head>
<!--
jQuery 实例

-->
<body>
<!--通过ajax改变文本内容 -->
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

<!--在元素后追加元素-->
<!--<img src="https://www.w3school.com.cn/i/eg_w3school.gif" alt="W3School Logo" />-->
<!--<br><br>-->
<!--<button id="btn1">在图片前面添加文本</button>-->
<!--<button id="btn2">在图片后面添加文本</button>-->

<!--追加元素-->
<!--<p>This is a paragraph.</p>-->
<!--<p>This is another paragraph.</p>-->
<!--<ol>-->
<!--  <li>List item 1</li>-->
<!--  <li>List item 2</li>-->
<!--  <li>List item 3</li>-->
<!--</ol>-->
<!--<button id="btn1">追加文本</button>-->
<!--<button id="btn2">追加列表项</button>-->

<!--改变html元素的内容-->
<!--<h2>This is a heading</h2>-->
<!--<p>This is a paragraph.</p>-->
<!--<p>This is another paragraph.</p>-->
<!--<button type="button">请点击这里</button>-->


<!--动画效果-->
<!--<button>开始动画</button>-->
<!--<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>-->
<!--<div style="background:#98bf21;height:100px;width:100px;position:absolute;">-->
<!--</div>-->

<!--折叠展示-->
<!--<div class="panel">-->
<!--  <p>W3School - 领先的 Web 技术教程站点</p>-->
<!--  <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>-->
<!--</div>-->

<!--<p class="flip">请点击这里</p>-->

<!--隐藏部分文本元素-->
<!--<h3>中国办事处</h3>-->
<!--<div class="ex">-->
<!--  <button class="hide" type="button">隐藏</button>-->
<!--  <p>联系人：张先生<br />-->
<!--    北三环中路 100 号<br />-->
<!--    北京</p>-->
<!--</div>-->

<!--<h3>美国办事处</h3>-->
<!--<div class="ex">-->
<!--  <button class="hide" type="button">隐藏</button>-->
<!--  <p>联系人：David<br />-->
<!--    第五大街 200 号<br />-->
<!--    纽约</p>-->
<!--</div>-->

<!--隐藏元素-->
<!--<p>点击我会消失</p>-->
<!--<p>点击我也会消失</p>-->
<!--<p>我也会消失</p>-->

<!--淡出元素-->
<!--<p>演示不同参数的fadeOut()方法</p>-->
<!--<button>点击这里,使三个元素淡出</button>-->
<!--<br><br>-->
<!--<div id="div1" style="width: 100px;height: 100px;background-color: red;"></div>-->
<!--<br>-->
<!--<div id="div2" style="width: 100px;height: 100px;background-color: green;"></div>-->
<!--<br>-->
<!--<div id="div3" style="width: 100px;height: 100px;background-color: blue;"></div>-->

<!--隐藏元素-->
<!--<h2 class="test">这是标题</h2>-->
<!--<p class="test">这是一个段落。</p>-->
<!--<p id="test1">这是另一个段落。</p>-->
<!--<button type="button">click me</button>-->
</body>
</html>
